import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import React, {MutableRefObject, useEffect} from "react";
import {deleteDictData, pageDictData, updateDictData} from "@/pages/system/dict/api";
import {message, Popconfirm, Tag} from "antd";
import DictDataEdit from "@/pages/system/dict/components/DictDataEdit";
import {API} from "@/services/typings";

interface IDictTypeTable {
  dictType?: string,
  actionRef?: MutableRefObject<ActionType>
}

const DictTypeTable: React.FC<IDictTypeTable> = ({dictType, actionRef}, ref) => {

  useEffect(() => {
    actionRef?.current?.reload()
  }, [dictType])

  const columns: ProColumns<API.IDictData>[] = [
    {
      title: '标签',
      dataIndex: 'dictLabel',
      ellipsis: true,
      key: 'dictLabel',
    },
    {
      title: '值',
      dataIndex: 'dictValue',
      ellipsis: true,
      key: 'dictValue',
      hideInSearch: true,
    },
    {
      title: '默认',
      dataIndex: 'isDefault',
      ellipsis: true,
      key: 'isDefault',
      valueType: 'select',
      hideInSearch: true,
      valueEnum: {
        "0": "是",
        "1": "否"
      },
      render: (text, record,) => {
        return record.isDefault === '0' ? <Tag color="magenta">是</Tag> : <Tag color="gold">否</Tag>
      },
    },
    {
      title: '表格回显样式',
      dataIndex: 'listClass',
      ellipsis: true,
      key: 'listClass',
      hideInSearch: true,
    },
    {
      title: '样式',
      dataIndex: 'cssClass',
      ellipsis: true,
      key: 'cssClass',
      hideInSearch: true,
    },
    {
      title: '渲染颜色',
      dataIndex: 'color',
      ellipsis: true,
      key: 'color',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 200,
      render: (text, record) => [
        <DictDataEdit
          isAdd={false}
          dictData={record}
          key={`update`}
          triggerButton={
            <a>编辑</a>
          }
          onSubmit={async (values: API.IDictData) => {
            values.id = record.id
            const {data} = await updateDictData(values)
            if (data) {
              actionRef?.current?.reload()
              message.success('修改成功')
            }
            return false
          }}
        />,
        <Popconfirm
          title={`确认删除`}
          description={`确认删除【${record.dictLabel}】权限吗？`}
          okText="确认"
          cancelText="取消"
          key={`delete`}
          onConfirm={async () => {
            const {data} = await deleteDictData(record.id)
            if (data) {
              actionRef?.current?.reload()
              message.success('删除成功')
            }
          }}
        >
          <a target="_blank" rel="noopener noreferrer" key="delete">删除</a>
        </Popconfirm>,
      ],
    },
  ]

  return (
    <ProTable<API.IDictData, API.PageParams>
      actionRef={actionRef}
      rowKey="id"
      search={false}
      toolBarRender={false}
      pagination={{
        pageSize: 20,
      } as any}
      request={async (params, sort, filter) => {
        if (!dictType) {
          return {
            data: [],
            success: true,
          }
        }
        const {data} = await pageDictData({...params, dictType: dictType})
        return data
      }}
      columns={columns}
    />
  )
};
export default DictTypeTable;
